<template>
	<view class="information" @click="toAddress()">
		<view>
			<view class="info">
				<view class="name">
					{{astore.username}}
				</view>
				<view class="phone">
					{{astore.phone}}
				</view>
			</view>
			<view>
				{{astore.area}}{{astore.address}}
			</view>
		</view>
		<u-icon name="arrow-right"></u-icon>
	</view>
	<view style="padding-bottom: 60px;margin-top: 10px;" v-if="goods.length>0">
		<view class="goods" v-for="(item,index) in goods" key="index">
			<view class="left">
				<image style="width: 150rpx; height: 140rpx; margin-left: 10px;" :src="item.goodsImage"></image>
				<view class="size">
					<text style="font-size: 25rpx;">名称:{{item.goodsName}}</text>
					<text style="font-size: 25rpx;">规格:{{item.specsName}}</text>
					<text class="goodsPrice">{{item.price}}元/{{item.goodsUnit}}</text>
				</view>
			</view>
			<view class="right">
				<text class="num">x{{item.num}}</text>
			</view>
		</view>
	</view>
	<view class="footer">
		<view class="footerLeft">
			<view>
				总计:<text style="color: #f3af28;font-weight: bold;">{{totalPrice}}元</text>
			</view>
		</view>
		<view @click="commit()" class="footerRight">
			提交订单({{totalNum}})
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue';
	import {
		orderStore
	} from '../../store/order';
	import {
		getAddressApi
	} from '../../api/user';
	import {
		addressStore
	} from '../../store/address';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		postOrderApi
	} from '../../api/order';
	import {
		carStore
	} from '../../store/car';
	//获取order的store
	const cstore = carStore()
	const store = orderStore()
	const astore = addressStore()
	const goods = computed(() => {
		return store.orderList
	})
	//总数
	const totalNum = computed(() => {
		let totalNum = 0;
		store.orderList.map(item => {
			item.flag ? totalNum += item.num : totalNum += 0
		})
		return totalNum
	})
	//总价
	const totalPrice = computed(() => {
		let totalPrice = 0;
		store.orderList.map(item => {
			item.flag ? totalPrice += item.num * item.price : totalPrice += 0
		})
		return totalPrice
	})
	//跳转到新增地址的页面
	const toAddress = (item) => {
		uni.navigateTo({
			url: '../addressList/addressList'
		})
	}
	//查询默认地址
	const getAddress = async () => {
		let result = await getAddressApi({
			openId: uni.getStorageSync('openid')
		})
		if (result && result.code == 200) {
			astore.flag = result.data.addressId
			astore.username = result.data.username
			astore.phone = result.data.phone
			astore.area = result.data.area
			astore.address = result.data.address
		}
	}
	//提交
	const commit = async () => {
		let parm = reactive({
			openId: uni.getStorageSync('openid'),
			username: astore.username,
			phone: astore.phone,
			address: astore.area + "/" + astore.address,
			price: totalPrice.value,
			orderGoods: store.orderList,
		})
		const result = await postOrderApi(parm)
		if (result && result.code == 200) {
			//清空购物车
			cstore.carList = []
			uni.navigateBack()
		}
	}
	onLoad(() => {
		getAddress()
	})
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
	}

	.information {
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		padding: 10px 20px;

		.info {
			display: flex;

			.name {
				font-size: 15px;
				font-weight: 600;
			}

			.phone {
				margin-left: 10px;
			}
		}
	}

	.goods {
		display: flex;
		padding: 30rpx 15rpx 30rpx 30rpx;
		background-color: #fff;
		justify-content: space-between;
		border-bottom: 5rpx solid #f1f1f1;
		align-items: center;

		.left {
			display: flex;

			.goodsLeft {
				display: flex;
				align-items: center;
			}

			.size {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin-left: 20rpx;

				.goodsPrice {
					font-size: 25rpx;
					color: #f44545;
				}
			}
		}

		.right {
			text {
				width: 50rpx;
				line-height: 50rpx;
				text-align: center;
				display: inline-block;
				background-color: #f7f7f7;
				margin-right: 10rpx;
			}

			.add {
				color: #fa4305;
				border-radius: 10rpx 30rpx 30rpx 10rpx;
				margin-right: 20rpx;
			}

			.subtract {
				border-radius: 30rpx 10rpx 10rpx 30rpx;
			}
		}
	}

	.footer {
		width: 100%;
		height: 90rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
	}

	.footerLeft {
		width: 70%;
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
	}

	.footerRight {
		width: 30%;
		line-height: 90rpx;
		background-color: lightgreen;
		text-align: center;
		color: #fff;
	}
</style>